<template>
    <div>
        <div class="top">
            <h1 class="title">加入坤课讲师团，让技术再次发光</h1>
            <div class="top-flex">
                <div>
                    <p>与其寻找副业增加收入，不如开辟职业第二春</p>
                    <p>用专业收获学员认可，让技术展现更多价值</p>
                </div>
                <el-button @click="joinUs">加入我们</el-button>
            </div>
        </div>
        <div class="item">
            <div class="title-image">
                <el-image :src="require('./images/title-1.png')" style="width: 306px; height: 35px;"></el-image>
            </div>
            <div class="flex">
                <div class="citem cont-1">
                    <h4 class="citem-title">课程报酬</h4>
                    <p class="txt">
                        输出专业的知识和经验<br>
                        为学员提供优质的教学服务<br>
                        通过授课获得可观收入
                    </p>
                </div>
                <div class="citem cont-2">
                    <h4 class="citem-title">课程报酬</h4>
                    <p class="txt">
                        输出专业的知识和经验<br>
                        为学员提供优质的教学服务<br>
                        通过授课获得可观收入
                    </p>
                </div>
                <div class="citem cont-3">
                    <h4 class="citem-title">课程报酬</h4>
                    <p class="txt">
                        输出专业的知识和经验<br>
                        为学员提供优质的教学服务<br>
                        通过授课获得可观收入
                    </p>
                </div>
            </div>
        </div>

        <div class="item">
            <div class="title-image">
                <el-image :src="require('./images/title-3.png')" style="width: 200px; height: 36px;"></el-image>
            </div>
            <div class="flex">
                <div class="citem1 step-1">
                    <h4 class="citem-title">提交申请</h4>
                    <p>迈出第一步<br>
                        让我们初步了解你<br>
                        突出专业技术和经验
                    </p>
                </div>
                <div class="citem1 step-2">
                    <h4 class="citem-title">能力测试</h4>
                    <p>这没什么难的<br>
                        录制试讲视频<br>
                        考察授课综合能力
                    </p>
                </div>
                <div class="citem1 step-3">
                    <h4 class="citem-title">大纲设计</h4>
                    <p>专业团队协助<br>
                        确定教学目标及大纲<br>
                        精细化教学设计
                    </p>
                </div>
                <div class="citem1 step-4">
                    <h4 class="citem-title">签约加入</h4>
                    <p>不急不躁计划先行<br>
                        确定后续课程计划<br>
                        及课程进度控制
                    </p>
                </div>
            </div>
        </div>

        <div class="item">
            <div class="title-image">
                <el-image :src="require('./images/title-5.png')" style="width: 387px; height: 33px;"></el-image>
            </div>
            <p class="sub-title5">我们的内容教研团队会协助你完成课程设计，并且提供科学的教学方法和技巧让你如虎添翼，<br>高效输出优质课程，斩获一大波粉丝</p>
            <div class="join-us"></div>
        </div>

    </div>
</template>

<script>
export default {
    name: 'ooperation-lecturer',
    methods: {
        joinUs() {
            if (JSON.stringify(this.userInfo) == '{}'){
                this.$router.push("/login");
            } else{
                this.$router.push("/apply/lecturer");
            }
        }
    },
    computed: {
        userInfo() {
            return this.$store.state.user.userInfo || {}
        }
    }
}
</script>

<style scoped>
.top {
    background-color: rgb(252, 54, 24);
    color: white;
    padding: 30px;
}

.title {
    font-size: 40px;
    text-align: center;
}

.top-flex {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 30px;
    font-size: 20px;
}

.top-flex .el-button {
    font-size: 20px;
}

.title-image {
    margin: 40px 0;
    text-align: center;
}

.item {
    margin: 100px 0;
}

.flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.citem {
    width: 345px;
    height: 340px;
    margin-right: 32px;
    padding-top: 164px;
    box-sizing: border-box;
    text-align: center;
}

.cont-1 {
    background: url(./images/cont-1.png) no-repeat;
    background-position: center;
    background-size: cover;
}

.cont-2 {
    background: url(./images/cont-2.png) no-repeat;
    background-position: center;
    background-size: cover;
}

.cont-3 {
    background: url(./images/cont-3.png) no-repeat;
    background-position: center;
    background-size: cover;
}

.citem-title {
    font-size: 18px;
    color: #1C1F21;
    letter-spacing: 0;
    text-align: center;
    line-height: 32px;
    font-weight: 600;
    margin-bottom: 18px;
}

.citem .txt {
    font-size: 14px;
    color: #FF360E;
    letter-spacing: 0;
    text-align: center;
    line-height: 24px;
    font-weight: 400;
}

.citem1 {
    width: 244px;
    height: 248px;
    position: relative;
    padding: 69px 46px 0;
    box-sizing: border-box;
}

.citem p {
    font-size: 14px;
    color: #545C63;
    letter-spacing: 0;
    line-height: 24px;
    font-weight: 400;
}

.step-1 {
    background: url(./images/step-1.png) no-repeat;
    background-position: center;
    background-size: cover;
}

.step-2 {
    background: url(./images/step-2.png) no-repeat;
    background-position: center;
    background-size: cover;
}

.step-3 {
    background: url(./images/step-3.png) no-repeat;
    background-position: center;
    background-size: cover;
}

.step-4 {
    background: url(./images/step-4.png) no-repeat;
    background-position: center;
    background-size: cover;
}

.sub-title5 {
    margin-top: 32px;
    font-size: 21px;
    color: #1C1F21;
    letter-spacing: 0;
    text-align: center;
    line-height: 42px;
    font-weight: 600;
    text-align: center;
}

.join-us {
    cursor: pointer;
    display: block;
    margin: 34px auto 0;
    width: 250px;
    height: 104px;
    background: url(./images/jionus-btn.png) 0 0 no-repeat;
    background-size: cover;
}
</style>